<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表字段查找,代码生成</title>
    <link rel="stylesheet" href="../../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/fa-font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/animate.min.css" />
    <link rel="stylesheet" href="../../css/appbase.css" />
    <link rel="stylesheet" href="../../css/style.css" />

    <link rel="stylesheet" href="../../plugins/contextMenu/jquery.contextMenu.min.css" />
    <link rel="stylesheet" href="../../plugins/syntaxhighlighter/shCore.css" />
    <link rel="stylesheet" href="../../plugins/syntaxhighlighter/shCoreDefault.css" />
    <link rel="stylesheet" href="../../plugins/syntaxhighlighter/theme/shThemeEclipse.css" />
    <link rel="stylesheet" href="../../plugins/icheck/custom.css" />
    <style>
        .list-group-item{
            cursor: pointer;
        }
        .list-group-item:hover{
            background-color: #E8E7E6;
        }
        .table-list{
            margin-top: -10px;
        }
        .table-list>.list-group-item{
            margin-top: 8px;
            margin-left: 5px;
        }

        select>option{
            font-size: 16px;
        }
        #multitableschemadialog ul.list-group>li{
            cursor: pointer;
        }

        .table-columns{
            overflow: hidden;
        }
        .table-columns>li{
            float: left;
            width: 240px;
            margin-left: 3px;
            height: 300px;
            border: 1px solid lightgrey;
        }
        .table-columns>li>textarea{
            height: 100%;
            width: 100%;
            resize: none;
            border: none;
            padding: 5px;
        }

        .schema-functions{
            background-color: whitesmoke;
            display: flex;
            align-items: center;
            padding-left: 12px;
        }

        .quick-create-table{
        }

        .quick-create-table .create-table-list>li{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .quick-create-table .table-list{
            max-height: 200px;
            overflow: scroll;
        }

        /*覆盖字体框架中的样式*/
        .context-menu-item{
            line-height: 1.5 !important;
        }

        table tbody tr.primary-key{
            /*color: lightgreen;*/
        }
        table tbody tr.primary-key td i{
            color: red;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default" >
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" >数据表工具类</a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-plug"></i></span>
                        <select class="form-control" style="width: 150px" name="" id="conns">
                        </select>
                        <div class="input-group-btn refresh"><button class="btn btn-link "><i class="fa fa-refresh text-danger"></i></button></div>
                        <div class="input-group-btn plusconn"><button class="btn btn-link "><i class="fa fa-plus text-forestgreen"></i></button></div>
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-database"></i></span>
                        <select class="form-control" style="width: 150px" name="" id="schemas">
                        </select>
                        <div class="input-group-btn"><button class="btn btn-link"><i class="fa fa-refresh text-danger"></i></button></div>
                    </div>
                </div>

                <div class="btn-group btn-group-sm">
                    <button class="btn  btn-success" id="multiTableSchemaCode"><i class="fa fa-android"></i> 多表方案生成</button>
                    <button class="btn  btn-info" id="projectBuild"><i class="fa fa-apple"></i> 项目构建</button>
                    <button class="btn  btn-white border-gold" id="quickCreateTable"><i class="fa fa-credit-card"></i> 快速建表</button>
                </div>
            </div>

        </div>


    </div>
    <div class="panel panel-default margin-top">
        <div class="panel-heading">数据表数量: <b id="tableCount"></b></div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-12">
                    <div class="row margin-bottom">
                        <div class="col-xs-12">
                            <div class="input-group ">
                                <input type="text" placeholder="输入表名/字段名/表注释/字段注释" class="form-control " autocomplete="off" spellcheck="false" name="keyword" id="search" />
                                <div class="input-group-btn">
                                    <button class="btn btn-primary" id="btnsearch"><i class="fa fa-search"></i> 搜索</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="list-group list-inline table-list" style="margin-left: 0;" id="tables">

                            </ul>
                            <table class="table table-striped table-bordered" id="columns">
                                <thead>
                                    <tr>
                                        <th>顺序</th>
                                        <td>列名</td>
                                        <td>类型</td>
                                        <td>注释</td>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 新建数据表对话框 -->
<div class="open-dialog" id="plusTableDialog">
    <form class="form-horizontal">
        <div class="form-group form-group-sm">
            <label for="" class="control-label col-sm-3">表名</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" name="tableName" autocomplete="off" spellcheck="false" />
            </div>
        </div>
        <div class="form-group form-group-sm">
            <label for="" class="control-label col-sm-3">注释</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" name="comment" autocomplete="off" spellcheck="false" />
            </div>
        </div>
        <div class="form-group form-group-sm">
            <label for="" class="control-label col-sm-3">主键</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" name="key" autocomplete="off" spellcheck="false" />
            </div>
        </div>
    </form>
</div>

<!-- 新建连接对话框 -->
<div class="open-dialog" id="plusConnDialog">
    <form  class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-2 ">名称:</label>
            <div class="col-sm-9">
                <input class="form-control" name="name" value="mysqlLocal" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">类型:</label>
            <div class="col-sm-9">
                <label class="radio-inline">
                    <input type="radio" name="dbType" checked="checked" value="mysql"> mysql
                </label>
                <label class="radio-inline">
                    <input type="radio" name="dbType" value="oracle"> oracle
                </label>
                <label class="radio-inline">
                    <input type="radio" name="dbType" value="postgresql"> postgresql
                </label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">主机:</label>
            <div class="col-sm-9">
                <input class="form-control" name="host"  value="localhost" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">端口:</label>
            <div class="col-sm-9">
                <input class="form-control" name="port" type="text" value="3306" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">库:</label>
            <div class="col-sm-9">
                <input class="form-control" name="database" placeholder="初始打开数据库" value="mysql" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">用户名:</label>
            <div class="col-sm-9">
                <input class="form-control" name="username" value="root" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">密码:</label>
            <div class="col-sm-9">
                <input class="form-control" name="userpass" value="h123" />
            </div>
        </div>
    </form>
</div>

<!--使用 tk.mybatis 生成代码对话框-->
<div class="open-dialog" id="tkmybatisCodeGenDialog">
    <form class="form-horizontal" >
        <div class="row">
            <div class="col-xs-3">
                <div class="btn-group btn-group-sm ">
                    <button class="btn btn-white" type="button" id="mybatiscodeaddtable"> <i class="fa fa-plus text-forestgreen border-forestgreen"></i></button>
                </div>
                <ul class="list-group margin-little-top" id="selectTableList">
                </ul>
            </div>
            <div class="col-xs-9 unknow-float">
                <div class="panel panel-info">
                    <div class="panel-heading">包配置</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">tkMapper:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"  name="baseMapper" value="tk.mybatis.mapper.common.Mapper" placeholder="Mapper 文件继承的类" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3" title="填写基础包,将自动配置下面的包">基础包:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"  name="base" placeholder="请先填这个，下面会自动填写"  />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">idColumn:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"  name="idColumn" value="id" placeholder="id 列，自增长列" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">sqlStatement:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"  name="sqlStatement" value="JDBC" placeholder="自增长策略" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">entity:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" key="entity" name="entityPackage" placeholder="entity包名" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3" title="javaMapper 和 xml 将在同一个包中">mapper:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" key="mapper" name="mapperPackage" placeholder="mapper 包名" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">controller:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" name="controllerPackage" placeholder="controller 包名" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3" >service:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"  name="servicePackage" placeholder="service 包名" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">vo:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" name="voPackage" placeholder="vo 包名" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="control-label col-sm-3" >dto:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"  name="dtoPackage" placeholder="dto 包名" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="control-label col-sm-3" >param:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"  name="paramPackage" placeholder="param 包名" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading">实体配置</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">继承自:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"  name="baseEntity" placeholder="继承自" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">排除字段:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" name="excludeColumns" placeholder="排除字段以逗号分隔" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">实现接口:</label>
                                    <div class="col-sm-9">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" name="interfaces" checked value="java.io.Serializable"  > Serializable
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">添加支持:</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" name="supports" checked  value="swagger"> swagger
                                    </label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" name="supports" checked value="lombok"> lombok
                                    </label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" name="supports" checked value="persistence"> persistence
                                    </label>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading">项目配置</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">groupId:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"  name="groupId" placeholder="groupId" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">artifactId:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" name="artifactId" placeholder="artifactId" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">version:</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" name="version">
                                            <option value="1.0-SNAPSHOT">1.0-SNAPSHOT</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">项目名字:</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"  name="projectName" placeholder="项目名字" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="control-label col-sm-3">springBoot:</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" name="springBootVersion">
                                            <option value="2.0.5.RELEASE">2.0.5.RELEASE</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!--快速建表对话框-->
<div class="open-dialog quick-create-table" id="quickCreateTableDialog">
    <div class="row">
        <!-- 左边用于表搜索 -->
        <div class="col-xs-6">
            <div class="row margin-bottom">
                <div class="col-xs-12">
                    <input type="text" placeholder="输入表名/字段名/表注释/字段注释" class="form-control " autocomplete="off" spellcheck="false" name="keyword"  />
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <ul class="list-group list-inline table-list" style="margin-left: 0;" id="contextTables">

                    </ul>
                    <table class="table table-striped table-bordered" id="contextColumns">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <td>列名</td>
                            <td>类型</td>
                            <td>注释</td>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <!-- 右边用于表创建,可以一次性建多表 -->
        <div class="col-xs-6">
            <div class="btn-group btn-group-sm padding-bottom">
                <button class="btn btn-white" name="newTable"><i class="fa fa-plane"></i> 添加新表 </button>
                <button class="btn btn-white" name="allDDL"><i class="fa fa-building"></i> 查看总 DDL </button>
				<button class="btn btn-white" name="saveDraft"><i class="fa fa-building"></i> 设计暂存 </button>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <ul class="list-group create-table-list" id="newtables">
                    </ul>
                </div>
                <div class="col-xs-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">.</div>
                        <div class="panel-body">
                            <div class="btn-group btn-group-sm padding-bottom ">
                                <button class="btn btn-white" name="addTranslateColumn"><i class="fa fa-calculator"></i> 添加翻译列 </button>
                                <button class="btn btn-white" name="currentDDL"><i class="fa fa-building"></i> 查看当前表 DDL </button>
                            </div>
                            <table class="table table-striped table-bordered" id="newTableColumns">
                                <thead>
                                    <th>顺序</th>
                                    <th col="columnName">列名</th>
                                    <th col="columnType">类型</th>
                                    <th col="comment">注释</th>
                                    <th>删除</th>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 翻译列对话框 -->
<div class="open-dialog" id="translateColumnsDialog">
	<textarea class="form-control" style="height: 250px" placeholder="以换行符(\n)做分隔每一行写入列的中文"></textarea>
</div>

<!--数据展示对话框-->
<div class="open-dialog" id="dataDialog" style="height: 100%;">
    <textarea style="width: 100%;height: 99%;" class="form-control"></textarea>
</div>

<!-- 数据展示对话框二 -->
<div class="open-dialog" id="dataShowDialog" style="">
	<div contenteditable="true" style="word-break: break-all;white-space: pre-line;line-height: 1.5em;"></div>
</div>

<!-- 多表按方案生成代码 -->
<div class="open-dialog" id="multitableschemadialog">
    <div class="row">
        <div class="col-xs-5">
            <ul class="list-group" >
            </ul>
        </div>
        <div class="col-xs-7">
            <div class="input-group input-group-sm">
                <input type="text" class="form-control " placeholder="搜索表" id="multisearch" />
                <span class="input-group-btn"><button class="btn btn-primary" id="multisearchBtn"><i class="fa fa-search"></i> </button></span>
            </div>
            <table name="generatetables" class="table table-striped table-bordered table-condensed">
                <thead>
                <tr>
                    <th><input type="checkbox" name="checkall" checked></th>
                    <th>表格名称</th>
                    <th>表格注释</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>

<!--模板代码配置-->
<div class="open-dialog" id="templatecodeconfig">
    <input type="hidden" name="currentcode">
   <div class="col-xs-6">
       <div class="form-inline">
           <div class="form-group">
               <div class="input-group input-group-sm">
                   <span class="input-group-addon"><i class="fa fa-bank"></i> 选择模板</span>
                   <select class="form-control" name="" style="width: 150px;" id="templates">
                   </select>
               </div>
           </div>
           <div class="form-group">
               <button class="btn btn-primary btn-sm" id="plustemplate"><i class="fa fa-plus"></i> 新模板</button>
               <button class="btn btn-info btn-sm" id="codeschema"><i class="fa fa-folder"></i> 方案</button>
               <a href="javascript:void(0);" id="seevars">查看可用变量</a>
           </div>
       </div>

        <!-- 模板加载位置 -->
       <div id="templatePreview"></div>

   </div>
    <div class="col-xs-6">
        <div class="btn-group btn-group-sm">
            <button class="btn btn-primary" id="copyCode"><i class="fa fa-copy"></i> 复制代码</button>
        </div>
        <div  id="codepreview">
        </div>
    </div>
</div>

<!--使用方案生成的进度框-->
<div class="open-dialog" id="codeSchemaProcessDialog">
    <div class="row">
        <div class="col-xs-12" >
            <ul class="list-group" ></ul>
        </div>
    </div>
</div>

<!--使用方案生成对话框-->
<div class="open-dialog" id="codeSchemaDialog">
    <div class="form-group">
        <div class="btn-group">
            <button class="btn btn-sm btn-primary" id="newCodeSchema"><i class="fa fa-plus-circle"></i> 新方案</button>
        </div>
    </div>

    <div class="alert-info alert ">点击方案即可下载代码</div>
    <ul class="list-group ">
        <li class="list-group-item">pojo,service,mybatis</li>
        <li class="list-group-item">service,mybatis</li>
    </ul>
</div>

<!-- 添加模板对话框 -->
<div class="open-dialog" id="plustemplatedialog">
    <div class="col-xs-12">
        <form class="form-horizontal" >
            <div class="form-group">
                <input type="text" name="baseName" class="form-control" placeholder="模板名称" />
            </div>
            <div class="form-group">
                <textarea name="content" placeholder="模板源码可以使用变量" class="form-control" style="min-height: 450px;"></textarea>
            </div>
        </form>
    </div>
</div>

<!-- 展示所有变量对话框 -->
<div class="open-dialog" id="varslist">
    <table class="table table-bordered table-bordered">
        <caption>主体变量表</caption>
        <thead>
            <tr>
                <td>变量名</td>
                <td>解释</td>
            </tr>
        </thead>
        <tbody>
            <tr><td>CONNECTION</td><td>连接名</td></tr>
            <tr><td>IPPORT</td><td>数据库连接</td></tr>
            <tr><td>SCHEMA</td><td>数据库名</td></tr>
            <tr><td>TABLE</td><td>表格名</td></tr>
            <tr><td>TABLE_COMMENTS</td><td>表注释</td></tr>
            <tr><td>COLUMNS</td><td>表格列的列表 List 对象,下面有解释</td></tr>

            <tr><td>TIME</td><td>时间 hh:mm:ss</td></tr>
            <tr><td>DATE</td><td>日期 yyyy-MM-dd</td></tr>
            <tr><td>AUTHOR</td><td>作者,取自计算机名</td></tr>

            <tr><td>PO_NAME</td><td>持久层类名</td></tr>
            <tr><td>PO_NAME_LOWER</td><td>持久层类名第一个字母小写</td></tr>
            <tr><td>PROPERTIES</td><td>属性列表 List 对象,下面解释</td></tr>

        </tbody>
    </table>

    <table class="table table-striped table-bordered">
        <caption>COLUMNS 说明</caption>
        <thead>
            <tr><td>变量名</td><td>解释</td></tr>
        </thead>
        <tbody>
            <tr><td>columnName</td><td>列名</td></tr>
            <tr><td>primaryKey</td><td>是否主键 true/false</td></tr>
            <tr><td>comments</td><td>列注释</td></tr>
        </tbody>
    </table>

    <table class="table table-striped table-bordered">
        <caption>PROPERTIES 说明</caption>
        <thead>
        <tr><td>变量名</td><td>解释</td></tr>
        </thead>
        <tbody>
        <tr><td>name</td><td>属性名</td></tr>
        <tr><td>capitalizeName</td><td>首字母大写属性名</td></tr>
        <tr><td>type</td><td>属性类型</td></tr>
        <tr><td>jdbcType</td><td>数据库类型名</td></tr>
        <tr><td>columnName</td><td>数据库字段名</td></tr>
        <tr><td>comments</td><td>注释信息</td></tr><tr><td>primaryKey</td><td>是否主键 true/false</td></tr>
        </tbody>
    </table>

</div>

<script type="text/html" id="generatetablestemplate">
    {{each tables as table}}
    <tr tablename="{{table.tableName}}">
        <td><input type="checkbox" {{if (table.selected === true ) }}checked{{/if}}  name="notgenerate" /></td>
        <td>{{table.tableName}}</td>
        <td>{{table.comments}}</td>
    </tr>
    {{/each}}
</script>

<script type="text/javascript" src="../../js/requirejs2.1.11-min.js"></script>
<script type="text/javascript" src="../config.js"></script>
<script type="text/javascript">
    require([ 'bootstrap','tools/tablehelp']);
</script>
</body>
</html>